<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{str}}</p>
        <p>{{num}}</p>
        <p>{{bool}}</p>
    </div>
</body>
<script>
    // 虚拟DOM => 使用数组和对象数据描述节点的层级关系  

    // 1. 初始化渲染时, 根据模版生成虚拟DOM, 并将虚拟DOM解析为真实DOM,渲染到视图中
    // var vDom = {
    //     tag:"div",
    //     elm:div#app,
    //     attrs:{
    //         id:"#app",
    //         class:"xx",
    //         title:"xxx",
    //         dataId:"xxx",
    //         "v-if":"xxx",
    //     },
    //     children:[
    //         {tag:"p",elm:p,attrs:{},children:[{tag:"",text:"Hello Vue",elm:text}]},
    //         {tag:"p",elm:p,attrs:{},children:[{tag:"",text:"100",elm:text}]},
    //         {tag:"p",elm:p,attrs:{},children:[{tag:"",text:"true",elm:text}]},
    //     ]
    // }

    // 2. 如果数据发生改变, 根据模版生成新的虚拟DOM
    //  app.str="Vue Hello"
    /* var vDom = {
        tag:"div",
        elm:div#app,
        attrs:{
            id:"#app",
            class:"xx",
            title:"xxx",
            dataId:"xxx",
            "v-if":"xxx",
        },
        children:[
            {tag:"p",elm:p,attrs:{},children:[{tag:"",text:"Vue Hello",elm:text}]},
            {tag:"p",elm:p,attrs:{},children:[{tag:"",text:"100",elm:text}]},
            {tag:"p",elm:p,attrs:{},children:[{tag:"",text:"true",elm:text}]},
        ]
    } */

    // 3. Vue内部封装有相应的diff算法, 对比两次虚拟DOM  => 找到需要更新的元素/内容 => 渲染到视图中

    var app = new Vue({  // 创建Vue实例
        el:"#app",   // 挂载的元素
        data:{ // 数据层 => 对应属性名将属性值 拼接到模版语法中
            str:"hello Vue",
            num:100,
            bool:true,
        }
    })


    console.log("Vue实例",app);
    setTimeout(()=>{
        app.str = "Vue hello";  // app.str => app.$data.str;
        // app.addNum(); // this -> app(Vue实例)
        // app.changeBool();
    },2000);


        





</script>
</html>